import React, { useEffect, useState } from 'react'

import { BackTop } from 'antd'

import './index.scss'

const GoTop = () => {
  const [show, setShow] = useState(false)

  useEffect(() => {
    window.addEventListener('scroll', (e: any) => {
      if (e.target.scrollingElement.scrollTop > 300) {
        setShow(true)
      } else {
        setShow(false)
      }
    })
  }, [])

  const gotop = () => {
    scrollTo({ top: 0 })
  }

  return (
    <BackTop className={`gotop ${show ? 'show' : ''}`}>
      <i className="iconfont icontop"></i>
    </BackTop>
  )
}

export default GoTop
